<template>
  <div class="mv-row">
      <div class="flex-sbt">
          <div class="tabs-list">
              <span :class="[i === active && 'tab-active', 'tabs-item']" v-for="(item,i) in tabs" :key="item"
                @click="toggleTabActive(i)"
               >{{item}}</span>
          </div>
          <span>列表</span>
      </div>

      <ul class="video-list">

          <li class="video-item"   v-for="(item, i) in videos" :key="i" 
            @click="gotoMv(item.id)"
          >
            <div class="top-info">
                <img class="video-bg-cover" :src="item.imgurl" />
                <div class="video-main-info">
                    <span class="video-type">mv</span>

                    <div class="video-cover">
                        <img :src="item.imgurl16v9" />
                    </div>

                    <div class="video-sub-info">
                        <img :src="data.artist.cover + '?imageView&thumbnail=60y60&quality=75&tostatic=0'" />
                        <span class="total-time">{{dformatTime(item.duration)}}</span>
                    </div>
                </div>
            </div>
            <div class="bottom-info">
                <p class="video-caption">{{item.name}}</p>
                <div class="bottom-sub-info">
                    <span>播放量： {{item.playCount}}</span>
                    <!-- <span>发布日期： {{item.publishTime}}</span> -->
                </div>
            </div>
          </li>
      </ul>
  </div>
</template>

<script>
import api from '@/api'

export default {
    props: ['data'],
    data(){
        return {
            videos: [1,2,3],
            more: false,
            tabs: [
                '全部', 'MV'
            ],
            active: 0
        }
    },
    watch: {
        data(n){
            if(n && n.artist) {
                this.getVideosBySingerId(n.artist.id)
            }
        }
    },
    methods: {
        toggleTabActive(index){
            this.active = index;
            this.getNewVideos();
        },
        
        getNewVideos(){

        },

        gotoMv(id){

            this.$router.push({
                path: '/video',
                query: {
                    cid: id,
                    ids: this.videos.map(i => i.id).join(';')
                }
            })
        },

        getVideosBySingerId(id){
            if(!id) return
            api.getVideosBySingerId(id).then(res => {
                console.log(res.data);

                this.videos = res.data.mvs;
                this.more = res.data.hasMore;
            })
        },

        dformatTime(time){
            let seconds = Number(time/1000);
            let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
			seconds -= 3600 * hour;
			let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
			seconds -= 60 * min;
			let sec = seconds >= 10 ? seconds : '0' + seconds;
			return hour + ':' + min + ':' + sec;
        }
    },
    created(){
        if(this.data && this.data.artist) {
            this.getVideosBySingerId(this.data.artist.id);
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';
    .mv-row {

        .flex-sbt {
            @include spaceBetween;
            padding: 0 px2rem(10);

            .tabs-list {
                margin: px2rem(10) 0;
                cursor: pointer;

                .tabs-item {
                    margin: px2rem(4) px2rem(10) 0 0;
                    &.tab-active {
                        color: rgba(245, 72, 87, 0.87);
                        background-color: rgba(245, 72, 86, 0.562);
                        padding: px2rem(2) px2rem(6);
                        border-radius: px2rem(4);
                    }
                }   
                
            } 
        }

        .video-list {
            width: 100%;
            padding: 0 px2rem(10);
            @include scroll;
            .video-item {
                display: inline-block;
                width: 49%;
                margin-right: 2%;
                margin-bottom: px2rem(14);
                height: px2rem(240);
                border-radius: px2rem(10);
                overflow: hidden;
                .top-info {
                    height: 74%;
                    position: relative;
                    overflow: hidden;
                    .video-bg-cover {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        filter: blur(15px);
                    }

                    .video-main-info {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 2;
                        background-color: rgba(0,0,0,.2);
                        @include columnTop;
                        .video-type {
                            display: block;
                            background-color: rgba(255,255,255,.4);
                            color: rgba(0,0,0,.4);
                            @include defaultTitle;
                            border-radius: px2rem(4);
                            padding:0 px2rem(6);
                            margin: px2rem(16) auto;
                        }

                        .video-cover{   
                            width: 100%;
                            position: relative;
                            
                            img {
                                display: block;
                                width: 90%;
                                margin: auto;
                                height: px2rem(80);
                                border-radius: px2rem(4);
                                border: 1px solid rgba(255,255,255,.3);
                            }
                        }

                        .video-sub-info {
                            @include spaceBetween;
                            width: 100%;
                            padding: 0 px2rem(10) px2rem(4);
                            margin-top: auto;
                            img {
                                width: px2rem(26);
                                height: px2rem(26);
                                border-radius: 50%;

                            }

                            .total-time {
                                color: rgba(255, 255, 255, 0.7);
                                @include defaultFontSize;
                            }
                        }
                    }

                    
                }

                .bottom-info {
                    height: 26%;
                    background-color: #fff;
                    padding: px2rem(4);
                    box-sizing: border-box;
                    @include columnBetween;

                    .video-caption {
                        @include defaultTitle;
                        @include ellipsis2(2);
                        color: #333;
                        line-height: 1.2;
                    }

                    .bottom-sub-info {
                        span {
                            @include defaultFontSize;
                            color: #606060;
                        }
                    }
                }
            }

            .video-item:nth-child(2n) {
                margin-right: 0;
            }
        }
    }
</style>